<template>
  <!-- 分类区容器 -->
  <div class="itemContainer">
    <!-- 头部搜索区 -->
    <div class="itemSearch">
      <van-search @click="toSearch" class="search" placeholder="搜索商品，共30000+款好物" input-align="center" />
    </div>
    <!-- 内容展示区 -->
    <div class="itemContent">
      <!-- 侧边栏导航 -->
      <div class="sidebar" :data="cateListAttr">
        <ul>
          <li @click="handlerSidebar($event, index)" :data-categoryId="cateItem.id" :class="{ 'active': active == index }"
            v-for="cateItem, index in cateListAttr" :key="cateItem.id">{{ cateItem.name }}</li>
        </ul>
      </div>
      <!-- 主体内容 -->
      <div class="content" :data="currentCategoryList">
        <!-- benner图 -->
        <img :src="currentCategoryList.bannerUrl || 'https://yanxuan.nosdn.127.net/static-union/1670915168b000c3.png'">
        <!-- 商品分类展示区域 -->
        <div class="contentModel" :data="categoryGroupList">
          <!-- 商品类名 -->
          <div class="contentText" v-for="categoryGroup in categoryGroupList" :key="categoryGroup.id">
            <span>{{ categoryGroup.name }}</span>
            <hr>
            <!-- 商品展示区 -->
            <div class="contentItems">
              <div class="contentItem" v-for="category2 in categoryGroup.categoryList" :key="category2.id"
                @click="handlerClick(category2)">
                <img :src="category2.wapBannerUrl">
                <span>{{ category2.name }}</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import itemApi from '@/api/item'
import router from '@/router';
import { useRoute } from 'vue-router';

//获取分类数据
const cateListAttr = ref<any>([])
const getCateList = async () => {
  try {
    let result = await itemApi.getCateList()
    //console.log('分类数据', result);
    cateListAttr.value = result.data.categoryL1List
  } catch (error) {
    //console.log(error);
    alert('获取分类数据失败！')
  }
}
//根据分类ID获取分类的列表
const categoryGroupList = ref<any>([])
const currentCategoryList = ref<any>([])
const getCateGoryList = async (categoryId: number) => {
  try {
    let result = await itemApi.getCateGoryList(categoryId)
    //console.log('id分类列表', result);
    categoryGroupList.value = result.data.categoryGroupList
    currentCategoryList.value = result.data.currentCategory
  } catch (error) {
    //console.log(error);
    alert('获取分类列表数据失败！')
  }
}
//挂载页面的时候初始化数据
onMounted(() => {
  getCateList()
  //getCateGoryList()
})
//跳转到二级路由list
const route = useRoute()
const handlerClick = (category2:any) => {
  const subCategoryId = category2.id
  //console.log(subCategoryId);
  const categoryId = route.query.categoryId
  router.push({
    path: `/item/list`,
    query:{
      categoryId:categoryId,
      subCategoryId:subCategoryId
    }
  })
}
//点击分类列表切换高亮及获取分类列表数据
const active = ref<number>(0)//高亮
const handlerSidebar = (e: any, index: number): any => {
  active.value = index//左侧导航栏高亮
  const categoryId = e.target.getAttribute('data-categoryId')
  //console.log(categoryId);
  getCateGoryList(categoryId)
  router.push({
    path:'/item/cateList',
    query:{
      categoryId:categoryId
    }
  })
}

const toSearch = () => {
  router.push('/search')
}
</script>
  
<style scoped>
.itemContainer {
  position: relative;
}

.itemSearch {
  width: 10rem;
  height: 1.17rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  border-bottom: .03rem solid #d9d9d9;
  background-color: white;
}

.search {
  width: 9.2rem;
  height: .75rem;
  margin: 0 auto;
  border-radius: .27rem;
}

.itemContent {
  width: 10rem;
  height: 16.48rem;
  display: flex;
  margin-top: 1.17rem;
}

.sidebar {
  width: 2.16rem;
  height: 16.48rem;
  border-right: .03rem solid #d9d9d9;
  position: fixed;
  top: 1.17rem;
  left: 0;
}

.sidebar ul {
  margin-top: .59rem;
}

.sidebar ul li {
  width: 2.16rem;
  height: .67rem;
  font-size: .37rem;
  color: #333333;
  margin: .53rem 0;
  text-align: center;
}

.sidebar .active {
  border-left: .08rem solid #9d3631;
  color: #9d3631;
}

.content {
  width: 7.84rem;
  margin: .4rem 0 0 2.53rem;
}

.content img {
  width: 7.04rem;
  height: 2.56rem;
}

.contentText {
  margin-top: .13rem;
}

.contentText span {
  font-size: .37rem;
  color: #333333;
  font-weight: bolder;
}

.contentItems {
  display: flex;
  flex-flow: row wrap;
  margin-top: .27rem;
}

.contentItem {
  width: 1.92rem;
  text-align: center;
  margin-right: .4rem;
}

.contentItem img {
  width: 1.92rem;
  height: 1.92rem;
}

.contentItem span {
  font-size: .32rem;
  color: #454545;
  font-weight: normal;
}
</style>